<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
        <style>
            *{
                margin: 0px;
                padding: 0px;
                list-style: none;
            }
            div{
                width: 500px;
                margin: 0px auto;
                position: relative;
            }
            img:nth-of-type(1){
            width: 500px;
            }
            img:nth-of-type(2){
                position: absolute;
                left: 38%;
                top: 48%;
                margin-top: -70px;
                margin-left: -14px;
                width: 140px;   
            }
        </style>
    </head>
    <body>
        <div><img src="images/01.jfif" alt="">
            <img src="images/02.png" alt="" id="box">
        </div>
        <script>
           var box=document.getElementById('box');
           var n=0;
           var timer;
           box.onclick=function(){
            clearInterval(timer)
            n=0;
            box.style.transform=`rotate(0deg)`;
            timer=setInterval(function(){
                    var a=parseInt(Math.random()*4)
                    m=360*3+a*75;
                    n=n+30;
                    if(n>=m){
                        console.log(1)
                        clearInterval(timer);
                    }else{
                        box.style.transform=`rotate(${n}deg)`;
                    } 
            },60)
          }
       </script>
        
    </body>
</html>